<!--
 * @Author: lxy 2110251760@qq.com
 * @Date: 2022-10-12 10:45:06
 * @LastEditors: lxy 2110251760@qq.com
 * @LastEditTime: 2022-10-18 15:34:27
 * @FilePath: \jep-training-trinity-group\briup-ui\src\pages\admin\info\category\List.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 资讯分类管理 -->
  <div>
    <!-- {{categories}} -->
    <!-- 第一行 查询-->
    <div class="header">
      <el-form :inline="true" :model="params" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="params.status" placeholder="请选择状态" clearable>
            <el-option label="未审核" value="未审核" />
            <el-option label="审核不通过" value="审核不通过" />
            <el-option label="审核通过" value="审核通过" />
            <el-option label="推荐" value="推荐" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input v-model="params.title" clearable placeholder="请输入标题" />
        </el-form-item>

        <el-form-item>
          <el-select
            v-model="params.categoryId"
            placeholder="请选择栏目"
            clearable
          >
            <el-option
              v-for="item in categories"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSend">发布风采</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 第一行 查询  结束-->
    <!-- 第二行 表格 -->
    <el-table v-loading="loading" :data="ziXunData" style="width: 100%" @row-click="toDetails">
      <el-table-column type="index" :index="1" label="序号" width="100" />

      <el-table-column prop="cover" label="封面" width="280">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="暂无封面" width="100px" height="100px">
        </template>

      </el-table-column>

      <el-table-column label="风采" width="310">
        <template slot-scope="scope">
          <li>资讯标题：{{ scope.row.title }}</li>
          <li v-if="scope.row.baseUser != null">
            作者姓名:{{ scope.row.baseUser.realname }}
          </li>
          <li v-if="scope.row.category != null">
            所属栏目：{{ scope.row.category.name }}
          </li>
          <li>发布时间：{{ scope.row.publishTime | fmtDate }}</li>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" />

      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <a href="#" class="toEdit" @click.prevent="toTui(scope.row)">推荐</a>
          <a
            href="#"
            class="offLine"
            @click.prevent="toDelete(scope.row.id)"
          >删除</a>
          <a href="#" class="check" @click.prevent="toCheck(scope.row)">审核</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 第二行 表格  结束-->

    <!-- 第三行 分页开始 -->
    <div class="page">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 20, 30, 50]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 第三行 分页结束 -->
    <!-- 第四行 审核模态框 开始 -->
    <el-dialog :title="title" :visible.sync="visible" @close="toClose">
      <el-form :model="form">
        <div class="title" style="text-align: center; font-size: 18px">
          {{ form.title }}
        </div>

        <div v-html="form.content" />
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="toNo()">审核不通过</el-button>
        <el-button type="primary" @click="toSuccess()">审核通过</el-button>
      </div>
    </el-dialog>
    <!-- 第四行 审核模态框 结束 -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  saveOrUpdate,
  deleteZiXun,
  pageQuery,
  changeStatus
} from '@/api/infoCategory'
export default {
  data() {
    return {
      // 表格对象和分页数据
      params: {
        page: 1,
        pageSize: 10
      },

      // 审核模态框
      title: '审核资讯风采信息',
      visible: false,
      // 模态框数据来源
      form: {},
      formLabelWidth: '120px',
      // 表格数据来源
      ziXunData: [],
      loading: true,

      total: 0
    }
  },
  computed: {
    ...mapGetters(['categories'])
  },
  created() {
    this.$store.dispatch('category/queryCategories')
    this.findAll(this.params)
  },
  mounted() {},
  methods: {
    // $router.push("/admin/info/article/Details")
    toDetails(row) {
      this.$router.push({
        query: { id: row.id },
        path: '/admin/info/article/Details'
      })
    },
    async toSuccess() {
      const res = await changeStatus({ id: this.form.id, status: '审核通过' })
      console.log(res, '审核通过')
      this.$message({
        type: 'success',
        message: res.message
      })
      this.findAll(this.params)
      this.visible = false
    },
    // toNo 审核不通过
    async toNo() {
      const res = await changeStatus({
        id: this.form.id,
        status: '审核不通过'
      })
      console.log(res, '审核不通过')
      this.$message({
        type: 'success',
        message: res.message
      })
      this.findAll(this.params)
      this.visible = false
    },
    // 审核按钮
    async toCheck(row) {
      this.visible = true
      this.form = { ...row }
    },
    async findAll() {
      for (const key in this.params) {
        // key属性名
        // this.params[key]  属性值
        // 如果属性值为空，就删掉
        if (!this.params[key]) {
          delete this.params[key]
        }
      }
      const res = await pageQuery(this.params)
      console.log(res, '分页多条件查询资讯')
      this.ziXunData = res.data.list
      this.total = res.data.total
      console.log(this.ziXunData, '111')
      this.loading = false
    },

    // 当前页码发生改变
    handleCurrentChange(page) {
      this.params.page = page
      this.findAll(this.params)
    },
    // 页码条数发送改变
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.params.page = 1
      this.findAll(this.params)
    },

    // 删除方法
    toDelete(id) {
      //  提示用户
      this.$confirm('此操作将删除这条资讯, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await deleteZiXun({ id })
          console.log(res, '删除该资讯')
          this.$message({
            type: 'success',
            message: res.message
          })
          this.findAll(this.params)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 推荐方法
    toTui(row) {
      //  提示用户
      this.$confirm('此操作将推荐这条资讯, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await changeStatus({ id: row.id, status: '推荐' })
          console.log(res, '推荐该资讯')
          this.$message({
            type: 'success',
            message: res.message
          })
          this.findAll(this.params)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消推荐'
          })
        })
    },
    toClose() {
      // 重置表单验证 清空表单验证
      setTimeout(() => {
        this.visible = false
      }, 500)
    },
    // 确定按钮 保存或更新
    toSubmit() {
      // 1,校验表单
      this.$refs.myForm.validate(async(valid) => {
        if (valid) {
          // 发送保存或者更新请求
          // 去api封装保存或更新的异步请求
          const res = await saveOrUpdate(this.form)
          this.$notify({
            type: 'success',
            message: res.message
          })
          this.findAll()

          this.toClose() // 重置表单验证  清空表单验证
        } else {
          return false
        }
      })
    },
    onSend() {
      this.$router.push({
        path: '/admin/info/article/publish'
      })
    },
    // 查询事件的方法
    onSearch() {
      this.params.page = 1
      this.findAll(this.params)
    }
  }
}
</script>
<style scoped>
.toEdit {
  color: green;
}
.offLine {
  color: red;
}
.check {
  color: blue;
}
</style>
